<template>
  <div>
    <g-layout
      :isShowLeftSider="true"
      :isShowHeader="true"
      :isShowFooter="true"
      :isShowRightSider="true"
    >
      <template #header>
        <div class="header-container"></div>
      </template>
      <template #leftSider>
        <div class="sider-container"></div>
      </template>
      <template #content>
        <div class="content-container"></div>
      </template>
      <template #rightSider>
        <div class="sider-container"></div>
      </template>
      <template #footer>
        <div class="header-container"></div>
      </template>
    </g-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import IndexMixin from './index-mixin';
  export default defineComponent({
    name: 'gLayoutDemo',
    mixins: [IndexMixin],
  });
</script>
<style lang="less" scoped>
  .header-container {
    height: 48px;
  }
  .sider-container {
    min-width: 200px;
  }
</style>
